<template>
    <div class="cell-item">
        <LabelRow class="LabelRow" :text="'共'+dataList.length+'条记录>>'" v-bind:label="label" @onMore="onMore"></LabelRow>
        <ul class="cell-ul">
            <li v-for="(item,index) in dataList" :key="index" class="cell-li">
                <div :class="getStatusClass(item)" class="db-status">{{item.eventType}}</div>
                <div class="cell-label">
                    <div class="text-over">
                        {{item.eventTitle}}
                    </div>
                </div>
            </li>
            <div v-if="!dataList.length" class="no-data">
                <img src="../../assets/no-data.png" alt="">
            </div>
        </ul>
        <YjAndDbDialog/>
    </div>
</template>
<script>
import LabelRow from "../common/labelRow.vue";
import Pubsub from "../../utils/pubsub";
import { ZHZXEventInfoQueryWarnInfo } from "../../config/api.js";
import { getTimeStr } from "../../utils";
import YjAndDbDialog from "./yjAndDbDialog.vue"

export default {
    components: {
        LabelRow,
        YjAndDbDialog,
    },
    data() {
        return {
            label: {
                url: require("../../assets/unifyAcceptWorkbench/dbsx-icon.png"),
                label: "超期提警"//原待办事项
            },
            dataList: [],
            //弹窗数据
            thConfig: [
                { prop: "eventTitle", label: "标题" },
                { prop: "eventType", label: "事件类型" },
                { prop: "eventNumber", label: "工单号" },
                { prop: "eventKeyword", label: "关键词" },
                { prop: "disposalUnitCodeName", label: "处置单位" },
                {
                    prop: "highLimitTime",
                    label: "市级到期时间",
                    formatter: function(row, column) {
                        return getTimeStr(row.highLimitTime,'yyyy-MM-dd');
                    }
                }
            ] //table头部配置
        };
    },
    created() {
        this.pubsub_token = Pubsub.subscribe(
            "ZHZX_WORKBENCH_TODO",
            (type, args) => {
                this.getList();
            }
        );
        this.getList();
    },
    destroyed(){
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        onMore() {
            Pubsub.publish("yjAndDbDialog", { dataList:this.dataList,config:this.thConfig,title:'超期提醒' });
        },
        getList() {
            ZHZXEventInfoQueryWarnInfo({ pageNum: 1, pageSize: 999,type:1 }).then(
                (res = {}) => {
                    this.dataList = res.rows;
                }
            );
        },
        getStatusClass(item) {
            let type = {
                "投诉举报": "sos",
                "咨询求助": "warning",
                "意见建议": "blue",
                "表彰表扬": "orange"
            };
            return type[item.eventType];
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.LabelRow{
    cursor: pointer;
}
.db-num {
    color: #ffaa00;
}
.db-date {
    color: #888888;
}
.triangle {
    height: 0;
    width: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid black;
    margin-right: 15px;
}
.db-status {
    color: #fff;
    padding: 0 3px;
    margin-right: 20px;
}
.warning {
    background: #e60012;
}
.sos {
    background: #00a01e;
}
.blue {
    background-color: blue;
}
.orange {
    background-color: #f6dda4;
}
</style>
